<template>
  <view class="information">
    <view class="optionList" v-if="progress < 2">
      <view class="optionItem" v-if="status <= 3">
        <text class="optionTitle">小程序名称</text>
        <input
          type="text"
          placeholder="请输入小程序名称"
          v-model="form.mini_nickname"
          :disabled="status == 1 || status == 2 || status == 3"
          v-on:input="checkName"
        />
        <text v-if="reason" style="color: #c11c0a">{{ reason }}</text>
      </view>
      <view class="optionItem" v-if="status == 4">
        <text class="optionTitle">小程序头像</text>
        <view class="addPic" @click="addPic('mini_url')" v-if="!form.mini_url">
          <text class="iconfont icon-camera"></text>
          <text>上传图片</text>
        </view>
        <view class="addPic" @click="addPic('mini_url')" v-else>
          <image :src="form.mini_url"></image>
        </view>
      </view>
      <view class="optionItem" v-if="status == 6 || status == 7 || status == 8">
        <text class="optionTitle">小程序简介</text>
        <input
          type="text"
          placeholder="请输入小程序简介"
          v-model="form.signature"
        />
      </view>
    </view>
    <view class="footer">
      <u-button
        @click="submitBtn"
        :custom-style="{ width: '600rpx', height: '80rpx' }"
        type="error"
        shape="circle"
        :disabled="
          (progress == 1 &&
            (status == 1 || status == 2 || status == 5 || status == 8)) ||
          (progress == 2 && status == 3)
        "
        >{{ btnText }}</u-button
      >
    </view>
  </view>
</template>

<script>
import myPicker from "./myPicker.vue";
import http from "@/common/http.js";
export default {
  components: {
    myPicker
  },
  props: {
    bind_store_id: {
      type: [String, Number],
      default: ""
    },
    progress: {
      type: [String, Number],
      default: ""
    },
    status: {
      type: [String, Number],
      default: ""
    },
    info: {
      type: Object,
      default: () => {
        return {};
      }
    },
    allCat: {
      type: Array,
      default: () => {
        return [];
      }
    },
    allOldCat: {
      type: Array,
      default: () => {
        return [];
      }
    },
    currentCat: {
      type: Array,
      default: () => {
        return [];
      }
    },
    mini_id: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      // 表单信息
      form: {
        mini_nickname: "",
        mini_url: "",
        signature: "",
        categories: [],
        file_data: ""
      },
      categories: [],
      // 显示分类的选择列表
      showCats: false,
      currentCatCopy: [],

      isFile: false,
      reason: false
    };
  },
  computed: {
    btnText() {
      if (this.progress == 1) {
        if (this.status == 0 || this.status == 3) {
          return "完善名称";
        }
        if (this.status == 2 || this.status == 1) {
          return "名称审核中";
        }
        if (this.status == 4) {
          return "修改头像";
        }
        if (this.status == 6 || this.status == 7 || this.status == 8) {
          return "修改简介";
        }
      }
      if (this.status == 0) {
        return "更新模板";
      }
      if (this.status == 1) {
        return "提交审核";
      }
      if (this.status == 3) {
        return "审核中";
      }
      if (this.status == 2) {
        return "发布小程序";
      }
    }
  },
  mounted() {
  },
  methods: {
    async checkName(e) {
      //微信名称检测有次数限制
      // let name = e.detail.value;
      // let mini_id = this.mini_id
      //  let res = await this.$allrequest.newStore.check_nickname({
      //        mini_info: {
      // 			nickname: name
      // 		},
      // 		mini_id:mini_id
      //      })
      // 	if (res.code == 0) {
      // 		this.reason = res.msg
      // 	}
    },
    // 点击选择图片
    addPic(el) {
      if (this.status != 6 && this.status != 7) {
        return;
      }

      this.$utils.uploadImage(1, (res) => {
        this.form[el] = res;
        if (el == "file_data") {
          this.changeCat();
        }
      });
    },

    // 点击提交审核按钮
    async submitBtn() {
      if (this.progress == 1) {
        if (this.status == 3 || this.status == 0) {
          this.setMiniName();
        }
        if (this.status == 4) {
          this.setImage();
        }
        if (this.status == 6 || this.status == 7 || this.status == 8) {
          this.setSignature();
        }
      } else {
        //更新版本
        if (this.status == 0) {
          this.updateTem();
        }
        //提交审核
        if (this.status == 1) {
          this.submit_audit();
        }
        //发布小程序
        if (this.status == 2) {
          this.release();
        }
      }

      // if (this.status == 2 || this.status == 5) {
      //   this.updateTem();
      // }
      // if (this.status == 3) {
      //   this.subAudit()
      // }
      // if (this.status == 6) {
      //   this.releaseApp()
      // }
    },
    /**
     * 修改名称
     */
    async setMiniName() {
      let nickname = this.form.mini_nickname;
      let mini_id = this.mini_id;
      let that = this;
      uni.showLoading({
        title: this.$t("home.loading")
      });
      let res = await this.$allrequest.newStore.set_mini_name(
        {
          mini_info: {
            nickname: nickname
          },
          mini_id: mini_id
        },
        true
      );
      uni.hideLoading();
      uni.showToast({
        title: res.msg,
        icon: "none",
        duration: 1500
      });
      if (res.code == 0) {
        that.$emit("submit");
      }
    },
    /**
     * 修改头像
     */
    async setImage() {
      let mini_url = this.form.mini_url;
      let mini_id = this.mini_id;
      let that = this;
      uni.showLoading({
        title: this.$t("home.loading")
      });
      let res = await this.$allrequest.newStore.set_head_img(
        {
          mini_info: {
            mini_url: mini_url
          },
          mini_id: mini_id
        },
        true
      );
      uni.hideLoading();
      uni.showToast({
        title: res.msg,
        icon: "none",
        duration: 1500
      });
      if (res.code == 0) {
        that.$emit("submit");
      }
    },

    //简介
    async setSignature() {
      let mini_id = this.mini_id;
      let signature = this.form.signature;
      let that = this;
      uni.showLoading({
        title: this.$t("home.loading")
      });
      let res = await this.$allrequest.newStore.set_signature(
        {
          mini_info: {
            signature: signature
          },
          mini_id: mini_id
        },
        true
      );
      uni.hideLoading();
      uni.showToast({
        title: res.msg,
        icon: "none",
        duration: 1500
      });
      if (res.code == 0) {
        that.$emit("submit");
      }
    },

    // 完善资料上传资料
    // 点击提交审核
    async submit_audit() {
      let param = {
        bind_store_id: this.bind_store_id,
        mini_id: this.mini_id
      };
      uni.showLoading({
        title: this.$t("home.loading")
      });
      const res = await this.$allrequest.newStore.submit_audit(param, true);
      uni.hideLoading();
      uni.showToast({
        title: res.msg,
        icon: "none",
        duration: 1500
      });
      if (res.code == 0) {
        this.$emit("submit");
      }
    },
    // 更新模板
    async updateTem() {
      uni.showLoading({
        title: this.$t("home.loading")
      });
      const res = await this.$allrequest.newStore.upgrade_template(
        {
          bind_store_id: this.bind_store_id,
          mini_id: this.mini_id
        },
        true
      );
      uni.hideLoading();
      uni.showToast({
        title: res.msg,
        icon: "none",
        duration: 1500
      });
      if (res.code == 0) {
        this.$emit("submit");
      }
    },
    // 发布
    async release() {
      uni.showLoading({
        title: this.$t("home.loading")
      });
      const res = await this.$allrequest.newStore.release(
        {
          bind_store_id: this.bind_store_id,
          mini_id: this.mini_id
        },
        true
      );

      uni.hideLoading();
      uni.showToast({
        title: res.msg,
        icon: "none",
        duration: 1500
      });
      if (res.code == 0) {
        this.$emit("submit");
      }
    }
  },
  created() {
    this.form = this.info;
    this.currentCatCopy = this.currentCat;
    let progress = this.progress;
    let status = this.status;

    if (
      (progress == 1 &&
        (status == 1 || status == 2 || status == 5 || status == 8)) ||
      (progress == 2 && status == 3)
    ) {
      this.$emit("showTitle", 1);
    }
    if (progress == 1 && (status == 3 || status == 9)) {
      this.$emit("showTitle", 2);
    }
  }
};
</script>

<style lang="scss" scoped>
.information {
  .optionList {
    padding-left: 24rpx;
    background-color: #fff;
    .optionItem {
      padding-top: 30rpx;
      padding-bottom: 30rpx;
      border-bottom: 1px solid #f8f8f8;
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      padding-right: 30rpx;
      .optionTitle {
        margin-bottom: 24rpx;
      }
      .optionChoose {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .iconfont {
          font-size: 24rpx;
          color: #888;
        }
      }
      .chooseType {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #8c8c8c;
        font-size: 24rpx;
        height: 80rpx;
        .iconfont {
          font-size: 24rpx;
          color: #888;
        }
      }
      input {
        width: 100%;
      }
      .tip {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-top: 24rpx;
        display: flex;
        flex-direction: column;
      }
      .sceneList {
        display: flex;
        flex-wrap: wrap;
        text {
          height: 60rpx;
          line-height: 60rpx;
          padding: 0 24rpx;
          background-color: #f2f2f2;
          border-radius: 30rpx;
          font-size: 24rpx;
          color: #8c8c8c;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
          font-weight: 600;
        }
        .current {
          border: 1px solid #f60313;
          background-color: #fbeceb;
          color: #f0250e;
        }
      }
      .addPic {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        background-color: #f6f6f6;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-size: 24rpx;
        color: #8c8c8c;

        &.addPic2 {
          width: 100%;
          height: 350rpx;
        }

        .iconfont {
          font-size: 56rpx;
          margin-bottom: 12rpx;
        }
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .optionItem:last-child {
      border-bottom: none;
    }
  }
  .footer {
    display: flex;
    padding-top: 10rpx;
    justify-content: center;
    border-top: 1px solid #f8f8f8;
    padding-bottom: 10rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
    .btn {
      width: 80%;
      height: 80rpx;
      border-radius: 999px;
      background-color: #f0250e;
      color: #fff;
      font-size: 32rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
